<template>
        <ul class="lefts">
            <li v-for="(item,index)  in leftdata"
             :key="index" :class="{active:currentindex==index}"
             @click="changeindex(index)">{{item.title}}</li>
        </ul>
</template>

<script>
import {getSubCategory} from '@/network/category'
export default {
    props:{
        leftdata:Array
    },
    created() {
        // getSubCategory(3627).then(res=>{
        //     console.log(res)
        // })
    },
    data() {
        return {
            currentindex:0
        }
    },
    methods: {
        changeindex(i){
            this.currentindex = i
            this.$emit('getrightdata',i)
        }
    },
}
</script>

<style scoped>
.lefts{
    width: 80px;
}
 li{
     box-sizing: border-box;
    border-bottom: 1px solid #fff;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #ccc;  
}
.active{
    border-left: 3px solid red;
    background-color: pink;
    color: #fff;
}
</style>